<template>
  <div class="mall">
    <div class="mall-sidebar">
      <van-sidebar v-model="cateIndex">
      <van-sidebar-item
        v-for="tab in tabs"
        :key="`tab-${tab.id}`"
        :to="`/mall/${tab.id}`"
        :title="tab.name"
      />
    </van-sidebar>
    </div>
    <div class="mall-section">
      <!-- 显示商品列表 -->
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Mall',
  data () {
    return {
      tabs: [],
      cateIndex: 0
    }
  },
  created () {
    this.$http.getTabs()
      .then(resp => {
        // console.log(resp.list)
        this.tabs = resp.list.slice(1)
        // 拿到数据之后重定向  这样首次进入进入商城时就默认跳去第0 条数据对应的路由
        const { id } = this.$route.params
        // 判断是否在当前页面刷新
        if (id) {
          // id已存在 就是在刷新  不跳转  但是需要修改cateIndex
          this.tabs.forEach((tab, index) => {
            // console.log(tab.id, id)   tab.id 是数字；id是字符串 所以直接比较不了
            if (tab.id === parseInt(id)) this.cateIndex = index
          })
        } else {
          this.$router.push(`/mall/${this.tabs[0].id}`)
        }
      })
  },
  beforeRouteUpdate (to, from, next) {
    // 在商城页面再点商城 就没有数据了因为要去的地方是没有id的（就是mall） 页面里面跳转是组件路由，有id的
    // console.log({ to, from })
    if (to.name !== 'Mall') {
      next()
    }
  }
}
</script>

<style lang="scss" scoped>
.mall {
  display: flex;
  height: 100%;
  &-sidebar {
    overflow-x: hidden;
    .van-sidebar-item--select::before {
      background-color: #95e1d3;
    }
  }
  &-section {
    flex: 1;
    overflow-x: hidden;
    background-color: #eee;
  }
}
</style>
